<template>
	<view class="p20r poRel minH100vC100r boSiBorBox">
		<view class="poAbs wPer100 hPer100 backColrgba255a255a255a0s9 top0 left0 zIndex1"
			v-if="!token"
		>
			<navigator class="w300r teAliCenter backCol64aeb4 lh80r colFff borRad40r poAbs top50P left50P trTrn50Pn50P"
				url="/pages/personalCenter/login"
			>
				立即登录
			</navigator>
		</view>
		<view class="mb40r backColWhite borRad10r pb20r"
			v-for="(item, index) in tempList" :key="index"
			@click="cliOrderFun(item)"
		>
			<view class="disFlex aliItCenter h100r pl20r pr20r backImgLiGrTRE5e7fcaFff">
				<view class="flex1 disFlex">
					<view class="flex1 foWeiBold webLiCl1 webBoxOrVer overHid disWebBox">
						{{item.rname}}
					</view>
				</view>
				<view class="w100r teAliRight col999">
					{{
						item.type == 1 ? '未支付' :
						item.type == 2 ? '已支付' :
						item.type == 3 ? '已退款' : item.type
					}}
				</view>
			</view>
			<view class="p20r">
				<view class="disFlex mt20r">
					<view class="w150r col999">
						服务时间：
					</view>
					<view class="flex1 teAliRight foWeiBold">
						<view>
							开始：{{item.start_time}}
						</view>
						<view class="mt10r">
							结束：{{item.end_time}}
						</view>
					</view>
				</view>
				<view class="mt20r col999">
					使用时长：{{item.hour}}小时
				</view>
				<view class="mt20r col999">
					实付金额：
					<text class="colFf3627">
						¥{{item.amount}}
					</text>
				</view>
			</view>
		</view>
		<view class="f28r col999 teAliCenter poAbs top50P left50P trTrXn50P" v-if="tempList.length == 0">
			暂无预订
		</view>
		<view class="col999 teAliCenter lh60r" v-if="tempList.length && noMore">
			已加载全部
		</view>
	</view>
</template>

<script>
import { cleanGetTeaRoomListInfo } from '@/utils/api.js'
import { inquiryToLogin } from '@/utils/utils.js'
export default {
	data() {
		return {
			token: '',
			tempList: [], noMore: false, tempPage: 0,
		}
	},
	onLoad() {

	},
	onShow() {
		const token = uni.getStorageSync('token');
		if(token) {//此项目中这种写法是弹遮罩层按钮点击跳登录页
			this.token = token;
			this.getDataList1(0);
		}else {
			this.token = '';
			this.tempList = [];
			this.noMore = false;
			this.tempPage = 0;
		}
	},
	onPullDownRefresh() {
		this.noMore = false;
		this.tempPage = 0;
		this.getDataList1(0, () => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if(!this.noMore) {
			this.tempPage++;
			this.getDataList1(this.tempPage);
		}
	},
	methods: {
		getDataList1(page, callBack) {
			// uni.showLoading({ title: '加载中...' })
			cleanGetTeaRoomListInfo({
				token: this.token, number: 10, page
			}).then(res => {
				if(page > 0) {
					this.tempList = this.tempList.concat(res.data.data);
				}else {
					this.tempList = res.data.data;
				}
				if(res.data.number < 10) this.noMore = true;
				// uni.hideLoading();
				if(callBack) callBack();
			})
		},
		cliOrderFun(item) {
			uni.navigateTo({
				url: '/pages/index/orderDetail?item=' + JSON.stringify(item)
			})
		}
	}
}
</script>

<style>
</style>
